<#include "/common/taglibs.ftl" />
<title>Dialog Demo</title>
<!--begin::Portlet-->
<div class="m-portlet">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    Typeahead Examples
                </h3>
            </div>
        </div>
    </div>

    <!--begin::Form-->
    <form class="m-form m-form--fit m-form--label-align-right">
        <div class="m-portlet__body">
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Basic Demo</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_1" type="text" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>19</b><br />
ltr" placeholder="States of USA">
                    </div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Bloodhound (Suggestion Engine)</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_2" type="text" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>27</b><br />
ltr" placeholder="States of USA">
                    </div>
                    <div class="m-form__help">
                        Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
                    </div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Prefetch</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_3" type="text" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>38</b><br />
ltr" placeholder="Countries">
                    </div>
                    <div class="m-form__help">Prefetched data is fetched and processed on initialization</div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Custom Templates</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_4" type="text" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>47</b><br />
ltr" placeholder="Oscar winners">
                    </div>
                    <div class="m-form__help">Custom templates give you full control over how suggestions get rendered</div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Multiple Datasets</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_5" type="text" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>56</b><br />
ltr" placeholder="Select an option">
                    </div>
                    <div class="m-form__help">Remote data is only used when the data provided by local and prefetch is insufficient</div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-form-label col-lg-3 col-sm-12">Modal Demos</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <a href="" class="btn btn-success m-btn m-btn--pill" data-toggle="modal" data-target="#m_typeahead_modal">Launch modal typeaheads</a>
                </div>
            </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions">
                <div class="row">
                    <div class="col-lg-9 ml-lg-auto">
                        <button type="reset" class="btn btn-brand">Submit</button>
                        <button type="reset" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!--end::Form-->
</div>

<!--end::Portlet-->

<!--begin::Modal-->
<div class="modal fade" id="m_typeahead_modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="">Typeahead Examples</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="la la-remove"></span>
                </button>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right">
                <div class="modal-body">
                    <div class="form-group m-form__group row m--margin-top-20">
                        <label class="col-form-label col-lg-3 col-sm-12">Basic Demo</label>
                        <div class="col-lg-9 col-md-9 col-sm-12">
                            <div class="m-typeahead">
                                <input class="form-control m-input" id="m_typeahead_1_modal" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>101</b><br />
ltr" type="text" placeholder="States of USA">
                            </div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <label class="col-form-label col-lg-3 col-sm-12">Bloodhound</label>
                        <div class="col-lg-9 col-md-9 col-sm-12">
                            <div class="m-typeahead">
                                <input class="form-control m-input" id="m_typeahead_2_modal" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>109</b><br />
ltr" type="text" placeholder="States of USA">
                            </div>
                            <div class="m-form__help">
                                Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
                            </div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row m--margin-bottom-20">
                        <label class="col-form-label col-lg-3 col-sm-12">Prefetch</label>
                        <div class="col-lg-9 col-md-9 col-sm-12">
                            <div class="m-typeahead">
                                <input class="form-control m-input" id="m_typeahead_3_modal" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>120</b><br />
ltr" type="text" placeholder="Countries">
                            </div>
                            <div class="m-form__help">Prefetched data is fetched and processed on initialization</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-secondary m-btn">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--end::Modal-->

<!--begin::Portlet-->
<div class="m-portlet">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    Validation State Examples
                </h3>
            </div>
        </div>
    </div>

    <!--begin::Form-->
    <form class="m-form m-form--fit m-form--label-align-right">
        <div class="m-portlet__body">
            <div class="form-group m-form__group row has-success">
                <label class="col-form-label col-lg-3 col-sm-12">Success State</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_1_validate" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>154</b><br />
ltr" type="text" placeholder="States of USA">
                    </div>
                    <div class="form-control-feedback">Success! You've done it.</div>
                    <span class="m-form__help">Example help text that remains unchanged.</span>
                </div>
            </div>
            <div class="form-group m-form__group row has-warning">
                <label class="col-form-label col-lg-3 col-sm-12">Warning State</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_2_validate" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>164</b><br />
ltr" type="text" placeholder="States of USA">
                    </div>
                    <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
                    <span class="m-form__help">Example help text that remains unchanged.</span>
                </div>
            </div>
            <div class="form-group m-form__group row has-danger">
                <label class="col-form-label col-lg-3 col-sm-12">Danger State</label>
                <div class="col-lg-4 col-md-9 col-sm-12">
                    <div class="m-typeahead">
                        <input class="form-control m-input" id="m_typeahead_3_validate" dir="<br />
<b>Notice</b>:  Undefined index: rtl in <b>C:\wamp64\www\kt\m5\theme\dist\preview\inc\view\demos\default\pages\crud\forms\widgets\typeahead.php</b> on line <b>174</b><br />
ltr" type="text" placeholder="States of USA">
                    </div>
                    <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
                    <span class="m-form__help">Example help text that remains unchanged.</span>
                </div>
            </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions">
                <div class="row">
                    <div class="col-lg-9 ml-lg-auto">
                        <button type="reset" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!--end::Form-->
</div>

<!--end::Portlet-->
<page-script>
    <script>
        //https://www.jstree.com/

        var Typeahead = function() {

            var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
            ];

            //== Private functions
            var demo1 = function() {
                var substringMatcher = function(strs) {
                    return function findMatches(q, cb) {
                        var matches, substringRegex;

                        // an array that will be populated with substring matches
                        matches = [];

                        // regex used to determine if a string contains the substring `q`
                        substrRegex = new RegExp(q, 'i');

                        // iterate through the pool of strings and for any string that
                        // contains the substring `q`, add it to the `matches` array
                        $.each(strs, function(i, str) {
                            if (substrRegex.test(str)) {
                                matches.push(str);
                            }
                        });

                        cb(matches);
                    };
                };

                $('#m_typeahead_1, #m_typeahead_1_modal, #m_typeahead_1_validate, #m_typeahead_2_validate, #m_typeahead_3_validate').typeahead({
                    hint: true,
                    highlight: true,
                    minLength: 1
                }, {
                    name: 'states',
                    source: substringMatcher(states)
                });
            }

            var demo2 = function() {
                // constructs the suggestion engine
                var bloodhound = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.whitespace,
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    // `states` is an array of state names defined in "The Basics"
                    local: states
                });

                $('#m_typeahead_2, #m_typeahead_2_modal').typeahead({
                            hint: true,
                            highlight: true,
                            minLength: 1
                        },
                        {
                            name: 'states',
                            source: bloodhound
                        });
            }

            var demo3 = function() {
                var countries = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.whitespace,
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    // url points to a json file that contains an array of country names, see
                    // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
                    prefetch: 'inc/api/typeahead/countries.json'
                });

                // passing in `null` for the `options` arguments will result in the default
                // options being used
                $('#m_typeahead_3, #m_typeahead_3_modal').typeahead(null, {
                    name: 'countries',
                    source: countries
                });
            }

            var demo4 = function() {
                var bestPictures = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    prefetch: 'inc/api/typeahead/movies.json'
                });

                $('#m_typeahead_4').typeahead(null, {
                    name: 'best-pictures',
                    display: 'value',
                    source: bestPictures,
                    templates: {
                        empty: [
                            '<div class="empty-message" style="padding: 10px 15px; text-align: center;">',
                            'unable to find any Best Picture winners that match the current query',
                            '</div>'
                        ].join('\n'),
                        suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
                    }
                });
            }

            var demo5 = function() {
                var nbaTeams = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    prefetch: 'inc/api/typeahead/nba.json'
                });

                var nhlTeams = new Bloodhound({
                    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
                    queryTokenizer: Bloodhound.tokenizers.whitespace,
                    prefetch: 'inc/api/typeahead/nhl.json'
                });

                $('#m_typeahead_5').typeahead({
                            highlight: true
                        },{
                            name: 'nba-teams',
                            display: 'team',
                            source: nbaTeams,
                            templates: {
                                header: '<h3 class="league-name" style="padding: 5px 15px; font-size: 1.2rem; margin:0;">NBA Teams</h3>'
                            }
                        },{
                            name: 'nhl-teams',
                            display: 'team',
                            source: nhlTeams,
                            templates: {
                                header: '<h3 class="league-name" style="padding: 5px 15px; font-size: 1.2rem; margin:0;">NHL Teams</h3>'
                            }
                        }
                );
            }

            return {
                // public functions
                init: function() {
                    demo1();
                    demo2();
                    demo3();
                    demo4();
                    demo5();
                }
            };
        }();

        jQuery(document).ready(function() {
            Typeahead.init();
        });
    </script>

</page-script>